<template>
    <!-- 联系我们 -->
    <h3 class="content-title">联系我们</h3>
    <div id="concat">
        <div
            :class="['concat-item', index != concatList.length - 1 ? 'uderline' : '']"
            v-for="(item, index) in concatList"
            :key="index"
        >
            <span>{{ item.name }}</span>
            <span>{{ item.phone }}</span>
        </div>
    </div>
    <!-- 品牌区域 -->
    <h3 class="content-title">旗下品牌</h3>
    <div
        :class="['brand', index !== 0 ? 'brand-item' : '', index === 0 ? 'brand-first' : '']"
        v-for="(item, index) in brandList"
        :key="index"
    >
        <span>{{ item.brand }}</span>
        <img :src="item.pic" alt="" />
    </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
    name: 'Contack',
    setup() {
        const data = reactive({
            concatList: [
                { name: '合作热线', phone: '400-68-2896' },
                { name: '质量热线', phone: '400-68-2898' }
            ],
            brandList: [
                { brand: '稳健医疗：Winner', pic: require('@/assets/image/logo@3x.png') },
                { brand: '全棉时代：Purcotton', pic: require('@/assets/image/qmlogo@3x.png') },
                { brand: '津梁生活：PureH2B', pic: require('@/assets/image/jllogo@3x.png') }
            ]
        })
        return {
            ...toRefs(data)
        }
    }
})
</script>

<style scoped lang="scss">
@import '@/assets/css/global.scss';

// 联系我们
#concat {
    margin: 16px 0;
    overflow: hidden;
    background-color: white;
    border-radius: 20px;

    .concat-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 70px;
        margin: 0 16px;

        > span:first-child {
            font-size: 12px;
            color: #999;
        }
    }
}

// 品牌区域
.brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 20px;
    background-color: white;
    border-radius: 15px;

    span {
        font-size: 14px;
    }

    img {
        width: 90px;
        height: 40px;
    }
}

.uderline {
    border-bottom: 1px solid #e8e8e8;
}

.brand-first {
    margin: 16px 0 4px 0;
}

.brand-item {
    margin-top: 8px;
}
</style>
